<template>
  <div>
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft"/>
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      <van-checkbox class="card-goods__item" v-for="item in goods" :key="item.id" :name="item.id">
        <van-card
          :title="item.title"
          :desc="item.desc"
          :num="item.num"
          :price="formatPrice(item.price)"
          :thumb="item.thumb"
        />
      </van-checkbox>
    </van-checkbox-group>
    <div class="recommend">
      <h2>宝宝可能还需要</h2>
      <router-view></router-view>
    </div>
    <van-submit-bar
      :price="totalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
    >
    <van-checkbox v-model="checked" @click="tap()">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Axios from 'axios';
    export default {
        name:'Cart',
        data() {
            return {
                checked:false,
                checkedGoods: [],
                goods: [{
                    id: '1',
                    title: '进口香蕉',
                    desc: '约250g，2根',
                    price: 200,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
                }, {
                    id: '2',
                    title: '陕西蜜梨',
                    desc: '约600g',
                    price: 690,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
                }, {
                    id: '3',
                    title: '美国伽力果',
                    desc: '约680g/3个',
                    price: 2680,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
                },
                {
                    id: '4',
                    title: '美国伽力果',
                    desc: '约680g/3个',
                    price: 2680,
                    num: 1,
                    thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
                }]
                                    
                }
        },

        methods: {
            //返回按钮事件
            onClickLeft() {
                this.$router.go(-1)
            },
            formatPrice(price) {
            return (price / 100).toFixed(2);
            },
                onSubmit() {
                    alert('结算')
                },
            tap(){
              
                if(this.checked == false){
                     for(var i=0;i<this.goods.length;i++){
                        this.checkedGoods.push(this.goods[i].id)
                    }
                    
                }else{
                   this.checkedGoods = []
                   
                }
            }
            
        },
        mounted() {
            
        },
         computed: {
            submitBarText() {
            const count = this.checkedGoods.length;
            return '结算' + (count ? `(${count})` : '');
            },
            totalPrice() {
            return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
            }
        },
        watch: {
            "checkedGoods":function(){
                
                if(this.checkedGoods.length == this.goods.length){
                    this.checked = true
                }else{
                    this.checked = false
                }
            }
        },

    }
</script>

<style scoped>
.van-image{
    border-radius: 10px;
    overflow: hidden;
}
.van-checkbox {
  margin: 0 15px;
}

.recommend {
  font-size: 10px;
  text-align: center;
}
.card-goods >>> span{
    width: 100%;
}
.card-goods{
    width: 100%;
}

</style>